<div class="textMap">
  <h2> Projeto Tsunami</h2>
  <p> Este projeto visa ser um recurso para visualização de um grupo de estações de medidas espalhadas ao longo da região sul do estado do 
  RS. Bem como, prover também a capacidade de manipulação de dados hidrícos e meteriológicos por conta de pesquisadores do curso de Engenharia Hidrica 
  da Universidade Federal de Pelotas.</p>
  <hr align="center" width="95%">
 </div>
<div class="leftMap">
  <fieldset >
    <legend>Links recomendados</legend>
    <a href="http://www.ufpel.edu.br" target="_blank"> UFPEL </a><br>
    <a href="http://hidrica.ufpel.edu.br/content/home/" target="_blank"> UFPEL-Engenharia Hidrica </a><br>
    <a href="http://www.abrh.org.br/SGCv3/" target="_blank"> ABRH </a><br>
    <a href="http://www2.ana.gov.br/Paginas/default.aspx" target="_blank"> ANA-Agencia Nacional de Aguas </a><br>
  </fieldset>
</div>
<div id="map-canvas"/>

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4zjYdd7H7urQ2CeXPcAC4MED3dc3Nwpw&sensor=true">
</script>
<script type="text/javascript">

    /*
     * Aqui esta o código da imagem da gota caso venha a ser substituida
     * Image Belongs to http://pixabay.com/en/drop-water-weather-rain-liquid-48872/
     */
    var image = 'img/gota.png';

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(-31.7519, -52.3425),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        zoom: 11
      };

      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

 
      <?php foreach ($leituras as $value):
        $leitura = $value[array_keys($value)[0]];
      ?>
      
        var marker<?php echo $value['Estacao']['id']; ?> = new google.maps.Marker({
          position: new google.maps.LatLng(<?php echo $value['Estacao']['latitude']; ?>, <?php echo $value['Estacao']['longitude']; ?>),
          map: map,
          icon: image,
          title:"<?php echo $value['Estacao']['nome']; ?>"
        });

        google.maps.event.addListener(marker<?php echo $value['Estacao']['id']; ?>, 'click', function() {
          new google.maps.InfoWindow( {content:
              '<div class="mapInfoWindow">'+
              '<div class="name"><b><?php echo $value["Estacao"]["nome"]; ?></b></div>'+
              <?php
                foreach ($leitura as $key => $data): 
                  if (in_array($key, array('id', 'sequencia', 'estacao_id')))
                    continue;
              ?>
                '<p><i><?php echo h($key); ?>:<i> <?php echo h($data);?></p>'+
              <?php endforeach; ?>
              '</div>'
              }).open(map,marker<?php echo $value['Estacao']['id']; ?>);
        });
      <?php endforeach; ?>
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>